import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useNavigate } from 'react-router-dom';
import 'swiper/css';
import 'swiper/css/pagination';

function App() {
    const navigate = useNavigate();
    return (
        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', fontFamily: 'Arial, sans-serif' }}>
            <div style={{ backgroundColor: '#00BFFF', color: 'white', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                    <div style={{ display: 'flex', flex: 1, justifyContent: 'space-between' }}>
                        <p onClick={() => navigate('/fenlei')}>分类</p>
                        <p onClick={() => navigate('/sou')}>搜索</p>
                    </div>
                </div>
                <div style={{ display: 'flex' }}>
                    <div style={{ display: 'flex' }}>
                        <i className="icon icon1" style={{ marginRight: '10px' }}></i>
                        <i className="icon icon2" style={{ marginRight: '10px' }}></i>
                    </div>
                    <i className="search-icon" style={{ fontSize: '20px' }}></i>
                </div>
            </div>
            <div style={{ flex: 1, padding: '10px' }}>
                <div style={{ padding: '10px', marginBottom: '10px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <span>干垃圾</span>
                            <span>7:30 - 8:30</span>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
                            <span>晚上</span>
                            <span>湿垃圾</span>
                            <span>19:00 - 20:00</span>
                        </div>
                    </div>
                    <div style={{}}>
                        <Swiper
                            spaceBetween={30}
                            slidesPerView={1}
                            loop={true}
                            autoplay={{
                                delay: 1000,
                                disableOnInteraction: false
                            }}

                        >
                            <SwiperSlide>
                                <img src="https://img2.baidu.com/it/u=2402706712,3389373230&fm=253&fmt=auto&app=120&f=PNG?w=1000&h=424" alt="垃圾回收广告1" style={{ width: '100%', height: 'auto', display: 'block' }} />
                            </SwiperSlide>
                            <SwiperSlide>
                                <img src="https://img2.baidu.com/it/u=1110345723,2960691221&fm=253&fmt=auto&app=120&f=JPEG?w=1002&h=500" alt="垃圾回收广告2" style={{ width: '100%', height: 'auto', display: 'block' }} />
                            </SwiperSlide>
                            <SwiperSlide>
                                <img src="https://img2.baidu.com/it/u=659016986,2628693238&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500" alt="垃圾回收广告3" style={{ width: '100%', height: 'auto', display: 'block' }} />
                            </SwiperSlide>
                        </Swiper>
                    </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '10px' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <i className="function-icon calendar-icon" style={{ fontSize: '30px', marginBottom: '5px' }}></i>
                        <img src="https://img1.baidu.com/it/u=4205853434,28086299&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" style={{ width: '50px', height: '50px' }} />
                        <span>投放日历</span>

                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <i className="function-icon door-icon" style={{ fontSize: '30px', marginBottom: '5px' }}></i>
                        <img src="https://img2.baidu.com/it/u=1650126131,1490114212&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" style={{ width: '50px', height: '50px' }} />
                        <span>上门回收</span>

                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <i className="function-icon ar-icon" style={{ fontSize: '30px', marginBottom: '5px' }}></i>
                        <img src="https://img2.baidu.com/it/u=571126884,1986761278&fm=253&fmt=auto&app=138&f=JPEG?w=297&h=300" alt="" style={{ width: '50px', height: '50px' }} />
                        <span>垃圾识别</span>

                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <i className="function-icon sign-icon" style={{ fontSize: '30px', marginBottom: '5px' }}></i>
                        <img src="https://img1.baidu.com/it/u=684137237,1603785002&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" style={{ width: '50px', height: '50px' }} />
                        <span onClick={() => navigate('/qian')}>每日签到</span>

                    </div>
                </div>
                <div style={{ marginBottom: '10px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                        <span>限时兑换</span>
                        <span>13 : 49 : 49</span>
                        <span onClick={() => navigate('/duihuan')}>更多</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <img src='https://img2.baidu.com/it/u=2653942563,2197280389&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667    ' alt="风扇" style={{ width: '100px', height: '100px', objectFit: 'cover', marginBottom: '5px' }} onClick={() => navigate('/shop')} />
                            <div style={{}}>
                                <span>200币</span>
                                <span>-250币</span>
                            </div>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <img src="https://img1.baidu.com/it/u=1219473260,19588976&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" alt="时钟" style={{ width: '100px', height: '100px', objectFit: 'cover', marginBottom: '5px' }} />
                            <div style={{}}>
                                <span>255币</span>
                                <span>-325币</span>
                            </div>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                            <img src="https://img0.baidu.com/it/u=782104731,1967989711&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667" alt="建筑" style={{ width: '100px', height: '100px', objectFit: 'cover', marginBottom: '5px' }} />
                            <div style={{}}>
                                <span>100币</span>
                                <span>-125币</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={{ marginBottom: '10px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                        <span>热门讨论</span>
                        <span>更多</span>
                    </div>
                    <div style={{ marginBottom: '10px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span className="top-label" style={{ backgroundColor: 'red', color: 'white', padding: '2px 5px', marginRight: '5px' }}>置顶</span>
                            <span>关于近期服务器故障的说明</span>
                        </div>
                        <div style={{}}>
                            <p>由于近期服务器波动，导致部分用户自助投放时获取的积分数据出现   误差，针对该情况我司紧急调整了服务器配置及相关...</p>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', color: 'gray' }}>
                            <span>25684</span>
                            <span>2019-7-25</span>
                        </div>
                    </div>
                    <div style={{}}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <span>求助</span>
                            <span>奶茶杯应该怎么扔？</span>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    );
}

export default App;